<template>
  <div class="register" id="register-app">
    <div class="register-box">
      <img src="../assets/pexels-artem-beliaikin-929192.jpg">
      <el-form
          :model="registerForm"
          status-icon
          :rules="registerRules"

          label-width="100px"
          class="register-container"
      >
        <h3 class="register-title">注册账号</h3>
        <el-form-item
            label="手机号"
            label-width="80px"
            prop="userPhone"
            class="userPhone"
        >
          <el-input
              type="input"
              v-model="registerForm.userPhone"
              auto-complete="off"
              placeholder="请输入注册手机号"
              style="width: 70%;"
          ></el-input>
          <el-button type="primary" @click="doSendingCode" class="code-button" :loading="loading">
            <span v-if="!sending">发送验证码</span>
            <span v-else>{{ countdown }}秒后重发</span>
          </el-button>
        </el-form-item>
        <el-form-item
            label="验证码"
            label-width="80px"
            prop="code"
        >
          <el-input
              type="input"
              v-model="registerForm.code"
              auto-complete="off"
              placeholder="请输入验证码"
              style="width: 70%;"
          ></el-input>
        </el-form-item>
        <el-form-item
            label="用户名"
            label-width="80px"
            prop="userName"
        >
          <el-input
              type="userName"
              v-model="registerForm.userName"
              auto-complete="off"
              placeholder="请输入注册用户名"
              style="width: 70%;"
          ></el-input>
        </el-form-item>
        <el-form-item
            label="密码"
            label-width="80px"
            prop="password"
        >
          <el-input
              type="password"
              v-model="registerForm.password"
              auto-complete="off"
              placeholder="请输入密码"
              style="width: 70%;"
          ></el-input>
        </el-form-item>
        <el-form-item
            label="确认密码"
            label-width="80px"
            prop="password2"
        >
          <el-input
              type="password"
              v-model="registerForm.confirmPassword"
              auto-complete="off"
              placeholder="再次输入密码"
              style="width: 70%;"
          ></el-input>
        </el-form-item>

        <el-form-item class="register-submit">
          <el-button type="primary" @click="register" class="register-submit">
            <span>注册</span>
          </el-button>
          <el-button type="primary" @click="back" class="back-submit">
            <span>返回</span>
          </el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
import axios from 'axios'
import {userRegister} from "@/API/UserAPI";
import {sendCode} from "@/API/UserAPI";

export default {
  name: "Register",
  data() {
    return {
      loading: false,
      sending: false,
      countdown: 60,
      registerForm: {
        userName: '',
        userPhone:'',
        password: '',
        confirmPassword: '',
        code: '',
        isAdmin: 1
      },
    }
  },
  computed: {
    registerRules() {
      const validatePhone = (rule, value, callback) => {
        // 定义一个正则表达式，用于匹配手机号码
        const PHONE_REGEX = /^1[3-9]\d{9}$/
        if (PHONE_REGEX.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确手机号'))
        }
      }
      const validateUserName = (rule, value, callback) => {
        // 定义一个正则表达式，用于匹配手机号码
        if (value.length < 4) {
          callback(new Error('用户名必须在4位以上'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码必须在6位以上'))
        } else {
          callback()
        }
      }
      const validateConfirmPassword = (rule, value, callback) => {
        if (value !== this.registerForm.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      }
      const validateCode = (rule, value, callback) => {
        if (!value) {
          callback(new Error('验证码为空'))
        } else {
          callback()
        }
      }

      return {
        'userName': [{'validator': validateUserName, 'trigger': 'blur'}],
        'userPhone': [{'validator': validatePhone, 'trigger': 'blur'}],
        'password': [{'validator': validatePassword, 'trigger': 'blur'}],
        'confirmPassword': [{'validator': validateConfirmPassword, 'trigger': 'blur'}],
        'code': [{'validator': validateCode, 'trigger': 'blur'}]
      }
    }
  },
  methods: {
    async register() {
      if (this.registerForm.password.length >= 6) {
        this.loading = true
        await userRegister({
          userName: this.registerForm.userName,
          userPassword: this.registerForm.password,
          confirmPassword: this.registerForm.confirmPassword,
          userPhone: this.registerForm.userPhone,
          code: this.registerForm.code,
        }).then(resp => {//resp返回的 code data{} msg 状态码
          if (resp.code === 1) {
            alert("注册成功")
            this.$router.push('/login')
          } else {
            alert(resp.description)
            this.loading = false
          }
        })
      }
    },
    back() {
      this.$router.push('/login')
    },
    doSendingCode() {
      if (this.sending) {
        return
      }
      // 如果没有输入手机号，显示提示信息
      if (!this.registerForm.userPhone) {
        this.$message.error('请输入手机号')
        return
      }
      // 如果输入了手机号，发送请求获取验证码
      sendCode(this.registerForm.userPhone)
          .then((result) => {
            // 如果返回的结果是 true，说明验证码发送成功，显示提示信息，开始倒计时
            if (result.code === 1) {
              this.$message.success('验证码已发送')
              this.sending = true
              this.countdown = 60
              let timer = setInterval(() => {
                this.loading = true;
                this.countdown--
                if (this.countdown === 0) {
                  // 如果倒计时结束，清除定时器，重置状态
                  clearInterval(timer)
                  this.loading = false;
                  this.sending = false
                  this.countdown = 60
                }
              }, 1000)
            } else {
              this.$message.error('验证码发送失败')
            }
          })
          .catch((error) => {
            console.log(error)
            this.$message.error('验证码发送失败')
          })
    }

  }
}
</script>

<style scoped>
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #333;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

}

.register-box {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

}

.register-box img {
  margin-top: 0px; /*改变图片*/
  width: 70%;
  height: 100%;
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

}

.register-container {
  padding-top: 5%; /*改变白色那部分*/
  display: flex;
  flex-direction: column;
  background-color: white;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  background-clip: border-box;
  width: 30%;
  border: 0px solid #eaeaea;
  /*box-shadow: 0 0 25px #cac6c6;*/
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

}

.register-title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

}

.register-submit {
  margin-left: 8%;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

}

.back-submit {
  margin-left: 12%;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

}

</style>